<!--首页-->
<template>
  <Layout class="mainContent">
    <Sider hide-trigger :style="{background: '#fff',minHeight:'100%'}">
      <Menu active-name="1-1" theme="light" width="auto" :open-names="['1']">
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-navigate"></Icon>
            Item 1
          </template>
          <MenuItem name="1-1">Option 1</MenuItem>
          <MenuItem name="1-2">Option 2</MenuItem>
          <MenuItem name="1-3">Option 3</MenuItem>
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-keypad"></Icon>
            Item 2
          </template>
          <MenuItem name="2-1">Option 1</MenuItem>
          <MenuItem name="2-2">Option 2</MenuItem>
        </Submenu>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-analytics"></Icon>
            Item 3
          </template>
          <MenuItem name="3-1">Option 1</MenuItem>
          <MenuItem name="3-2">Option 2</MenuItem>
        </Submenu>
      </Menu>
    </Sider>
    <Content :style="{padding: '0 24px',width:'600px'}">
      <Breadcrumb class="breadcrumb">
        <BreadcrumbItem>Home</BreadcrumbItem>
        <BreadcrumbItem>Components</BreadcrumbItem>
        <BreadcrumbItem>Layout</BreadcrumbItem>
      </Breadcrumb>
      <Content :style="{padding: '24px', minHeight: '400px', background: '#fff'}">

        Content
      </Content>
    </Content>
  </Layout>
</template>

<style>
  .mainContent {
    position: relative;
    float: left;
    margin-top: 10px
  }

  .mainContent .breadcrumb {
    padding: 0 14px;
    margin: 12px 0px;
    width: 322px;
    text-align: left;
  }

</style>

<script>
export default {
  name: 'Main',
  computed: {}
}
</script>
